---
title: O que é a renderização progressiva?
---

Renderização progressiva é o nome dado às técnicas utilizadas para melhorar o desempenho de uma página da web (em particular, melhorar o tempo percebido de carregamento) para exibir o conteúdo o mais rápido possível.

Essa prática costumava ser muito mais comum nos dias anteriores à internet banda larga, mas ainda é utilizada no desenvolvimento moderno, pois as conexões de dados móveis estão se tornando cada vez mais populares (e inconstantes)!

## Carregamento preguiçoso (lazy loading) de imagens

As imagens na página não são carregadas todas de uma vez. A imagem só é carregada quando o usuário rola para perto/na parte da página que exibe a imagem.

- `<img loading="lazy">` é uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que estão fora da tela até que o usuário rola perto delas.
- Use JavaScript para ver a posição da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posição da rolagem).

## Priorizar conteúdo visível (ou renderização acima)

Inclua apenas o mínimo de CSS/conteúdo/scripts necessário para a quantidade de páginas que seriam renderizadas no navegador do usuário primeiro para exibir o mais rápido possível, você pode então usar scripts adiados ou ouvir o evento `DOMContentLoaded`/`load` para carregar em outros recursos e conteúdo.

## Fragmentos HTML assíncronos

Liberando partes do HTML para o navegador, à medida que a página é construída no back-end. Mais detalhes sobre a técnica podem ser encontrados [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).

## Outras técnicas modernas

- [Progressive hydration](https://www.patterns.dev/posts/progressive-hydration/)
- [Streaming server-side rendering](https://www.patterns.dev/posts/server-side-rendering/)
- [Hydratação seletiva](https://www.patterns.dev/posts/react-selective-hydration/)
